<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: #6ff;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    哈哈哈哈&emsp;&emsp;&emsp;&emsp;&emsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</body>
<script>
    // 1. JS组成    
    // ECMAScript5  => ES5 ... ES6
    // BOM 
    // DOM    

    // 2.
    //  单行注释
    /* 多行注释 */

    // 3. 三种打印语法
    // document.write("hello<br>");
    // document.write("world<br>");

    // doument.write()  可以输出html结构到页面 => 会被解析为html标签
    // document.write("<h2>hello</h2>");

    // 原样输出:  
    // &lt;    <
    // &gt;    >
    // &nbsp;  
    // &emsp;
    // &ensp;
    // &copy;
    document.write("&lt;h2&gt;hello&lt;/h2&gt;");      

    // !!!  document.write()  不要用在点击事件中

    console.log()
    // alert()



    // 变量的三种声明方式

    // var a;    // undefind   =>  "undefined"
    // a = 10;   // 10   => "number"  

    // var b = 20;

    // var a = 10,b = 20; 


    // var 哈 = 10;
    // var 嘿 = 20;
    // var 哈嘿 = 哈 + 嘿;
    // console.log(哈嘿);


    // 7中数据类型 
    // string number boolean  null undefined  array object
    // typeof 

    // console.log(typeof 1); // "number"
    // console.log(typeof typeof 1);  // typeof  "number" => "string"



    // 10 % 3 = 3 ... 1     余数肯定小于除数

    // number 和  number
    // string  boolean  null undefined  和 number

    // 字符串 遇到 "+" 会拼接 
    // 字符串 遇到 "- * / %" 会先转转数字 再计算   (a. 纯数字字符串 => 数字  b.非纯数字 => NaN)
    // 布尔值 遇到 "+ - * / %" 会先转转数字 再计算   true => 1  false =>0 
    // null undefined 遇到 "+ - * / %" 会先转数字 再计算   null => 0  undefined => NaN 





    
</script>
</html>